<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>form</title>
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" href="./form.css">
</head>
<body>
  <form class="my-form" action="">
    <div class="my-form-item">
      <label class="my-form-label">单行输入框</label>
      <div class="my-input-block">
        <input type="text" autocomplete="off" placeholder="请输入" class="my-input">
      </div>
    </div>
    <div class="my-form-item">
      <div class="my-inline">
        <label class="my-form-label">多行输入框</label>
        <div class="my-input-inline">
          <input type="text" autocomplete="off" placeholder="请输入" class="my-input">
        </div>
      </div>
      <div class="my-inline">
        <label class="my-form-label">多行输入框</label>
        <div class="my-input-inline">
          <input type="text" autocomplete="off" placeholder="请输入" class="my-input">
        </div>
      </div>  
    </div>
    
    <div class="my-form-item">
      <div class="my-inline">
        <label class="my-form-label">多行输入框</label>
        <div class="my-input-inline">
          <input type="text" autocomplete="off" placeholder="请输入" class="my-input">
        </div>
        <div class="my-form-tip my-word-aux">辅助文案信息</div>
      </div>  
    </div>

    <div class="my-form-item">
      <label class="my-form-label">多行输入框</label>
      <div class="my-inline" style="width: 100px">
        <input type="text" autocomplete="off" placeholder="￥" class="my-input">
      </div>
      <div class="my-form-tip">-</div>
      <div class="my-inline" style="width: 100px">
        <input type="text" autocomplete="off" placeholder="￥" class="my-input">
      </div>
    </div>
    <div class="my-form-item">
      <label class="my-form-label">选择</label>
      <div class="my-input-block">
        <div class="my-form-select my-unselect">
            <div class="my-select-title my-unselect">
              <input type="text" class="my-input my-unselect" readonly value="声音"/>
              <i class="my-arrow"></i>
            </div>
            <ul>
              <li>原野</li>
              <li>声音</li>
              <li>星空</li>
            </ul>
          </div>
      </div>
    </div>
    <div class="my-form-item">
      <label class="my-form-label">选择</label>
      <div class="my-input-block">
        <div class="my-form-radio">
          <i class="fa fa-square-o"></i>
          <span>写作</span>
        </div>
        <div class="my-form-radio">
          <i class="fa fa-check-square"></i>
          <span>阅读</span>
        </div>
        <div class="my-form-radio" disabled>
          <i class="fa fa-square-o"></i>
          <span>禁止</span>
        </div>
      </div>
    </div>
    
  </form>
  
</body>
</html>